import ChartTitle from '@/components/Visual/chartTitle';
import { echartsResize } from '@/utils/echartsResize';
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
import './index.less';
let charEle;
// const NO2_data = [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, 344.0];
// const O3_data = [281.55, 398.35, 214.02, 179.55, 289.57, 356.14, 422.0];
const date_list = [
  '00:00',
  '01:00',
  '02:00',
  '03:00',
  '04:00',
  '05:00',
  '06:00',
  '07:00',
  '08:00',
  '09:00',
  '10:00',
  '11:00',
  '12:00',
  '13:00',
  '14:00',
  '15:00',
  '16:00',
  '17:00',
  '18:00',
  '19:00',
  '20:00',
  '21:00',
  '22:00',
  '23:00',
];
const TodayParkingData = (props: { turnoverRates: number[]; userRates: number[] }) => {
  const { turnoverRates, userRates } = props;
  const chartRef: any = useRef(null); //拿到eCharts容器
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const option = {
    backgroundColor: 'transparent',
    legend: {
      show: true,
      left: '40%',
      top: '0%',
      itemGap: 20,
      itemWidth: 8,
      itemHeight: 2,
      data: [
        {
          name: '周转率',
          icon: 'rect',
          textStyle: {
            color: '#D0DEEE',
          },
          itemStyle: {
            color: '#D0DEEE',
          },
        },
        {
          name: '利用率',
          icon: 'rect',
          textStyle: {
            color: '#D0DEEE',
          },
          itemStyle: {
            color: '#159AFF',
          },
        },
      ],
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(0, 255, 233,0)',
              },
              {
                offset: 0.5,
                color: 'rgba(255, 255, 255,1)',
              },
              {
                offset: 1,
                color: 'rgba(0, 255, 233,0)',
              },
            ],
            global: false,
          },
        },
        label: {
          show: true,
          backgroundColor: '#000',
          color: '#556677',
          borderColor: 'rgba(0,0,0,0)',
          shadowColor: 'rgba(0,0,0,0)',
          shadowOffsetY: 0,
        },
        textStyle: {
          color: '#5c6c7c',
        },
      },
      formatter: function (params: any) {
        // const item = params[0];
        // const item1 = params[1];
        // console.log(params);
        let str = params[0].axisValue + '<br />';
        params.forEach((item: any) => {
          str +=
            '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' +
            'rgba(21,154,255,0.3)' +
            '"></span>' +
            item.seriesName +
            ' : ' +
            item.data.toFixed(2) +
            '%' +
            '<br />';
        });
        // console.log(item);
        return str;
      },
    },
    // grid: {
    //   top: '15%',
    //   left: '5%',
    //   // containLabel: true
    // },
    grid: {
      top: '12%',
      right: '8%',
      left: '8%',
      bottom: '10%',
    },
    xAxis: [
      {
        type: 'category',
        axisLine: {
          show: true,
        },
        axisLabel: {
          interval: 1,
          textStyle: {
            color: '#D0DEEE',
          },
          // 默认x轴字体大小
          fontSize: 12,
          // margin:文字到x轴的距离
        },
        splitLine: {
          show: true,
          //   onZero: true,
          interval: 0,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(108, 128, 151, 0.3)',
            // dashOffset: 5,
            // offset: 10,
          },
        },
        axisTick: {
          show: false,
        },
        boundaryGap: true,
        data: date_list,
        // date:getVirtulData()['data'],
      },
    ],

    yAxis: [
      {
        type: 'value',
        min: 0,
        name: '单位',
        // max: 140,
        splitNumber: 4,
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,0.1)',
          },
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          interval: 1,
          textStyle: {
            color: '#D0DEEE',
          },
          // 默认x轴字体大小
          fontSize: 12,
          formatter: '{value}%', //字符串模板

          // margin:文字到x轴的距离
        },
        axisTick: {
          show: false,
        },
        formatter: function (params: any) {
          // const item = params[0];
          // const item1 = params[1];
          console.log(params);
        },
      },
    ],
    series: [
      {
        name: '周转率',
        type: 'line',
        // smooth: true, //是否平滑
        showAllSymbol: true,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: 'circle',
        symbolSize: 5,
        lineStyle: {
          normal: {
            color: '#D0DEEE',
            // shadowColor: 'rgba(255, 255, 255, 0.8)',
            shadowBlur: 0,
            shadowOffsetY: 5,
            shadowOffsetX: 5,
          },
        },
        itemStyle: {
          color: '#fff',
          //   borderColor: '#fff',
          //   borderWidth: 3,
          shadowColor: 'rgba(0, 0, 0, .3)',
          shadowBlur: 0,
          shadowOffsetY: 2,
          shadowOffsetX: 2,
        },
        tooltip: {
          show: true,
        },
        data: turnoverRates.map((item) => item * 100),
      },
      {
        name: '周转率',
        type: 'line',
        // smooth: true, //是否平滑
        showAllSymbol: true,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: 'circle',
        symbolSize: 15,
        itemStyle: {
          color: 'transparent',
          borderColor: 'rgba(255,255,255,0.3)',
          borderWidth: 1,
          borderDashOffset: 1,
          shadowColor: 'rgba(0, 0, 0, .3)',
          shadowBlur: 2,
          shadowOffsetY: 2,
          shadowOffsetX: 2,
        },
        tooltip: {
          show: false,
        },
        data: turnoverRates.map((item) => item * 100),
      },
      {
        name: '利用率',
        type: 'line',
        // smooth: true, //是否平滑
        showAllSymbol: true,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: 'circle',
        symbolSize: 5,
        lineStyle: {
          normal: {
            color: '#159AFF',
            shadowColor: 'rgba(0, 0, 0, .3)',
            shadowBlur: 0,
            shadowOffsetY: 5,
            shadowOffsetX: 5,
          },
        },
        // label: {
        //   show: true,
        //   position: 'top',
        //   textStyle: {
        //     color: '#6c50f3',
        //   },
        // },
        itemStyle: {
          color: '#fff',
          //   borderColor: 'rgba(21,154,255,0.3)',
          //   borderWidth: 5,
          //   borderDashOffset: 2,
          shadowColor: 'rgba(21, 154, 255, 0.8)',
          shadowBlur: 6,
          //   shadowOffsetY: 6,
          //   shadowOffsetX: 6,
        },
        tooltip: {
          show: true,
        },
        data: userRates.map((item) => item * 100),
      },
      {
        name: '利用率',
        type: 'line',
        // smooth: true, //是否平滑
        showAllSymbol: true,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: 'circle',
        symbolSize: 15,
        itemStyle: {
          color: 'transparent',
          borderColor: 'rgba(21,154,255,0.3)',
          borderWidth: 1,
          borderDashOffset: 1,
          shadowColor: 'rgba(0, 0, 0, .3)',
          shadowBlur: 2,
          shadowOffsetY: 2,
          shadowOffsetX: 2,
        },
        tooltip: {
          show: false,
        },
        data: userRates.map((item) => item * 100),
      },
    ],
  };

  // const createChunk = ()=>{

  // }//创建切片

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const initChart = () => {
    const char = document.getElementById('myChart1');
    if (char) {
      charEle = echarts.init(char);
      chartRef.current = charEle;
      charEle.setOption(option as any);
      echartsResize(charEle);
    }
  };
  useEffect(() => {
    initChart();
  }, []);

  useEffect(() => {
    if (chartRef.current) {
      chartRef.current.setOption(option as any);
    }
  }, [option, props]);
  return (
    <div className="TodayParkingData">
      <div className="title">
        <ChartTitle title="日泊位数据" />
        <img className="polyline" src="/visual/tabTitlePolyline.svg" alt="" />
        <img className="diamond" src="/visual/titleRectangle.svg" alt="" />
      </div>
      <div id="myChart1" className="chart" ref={chartRef} />
    </div>
  );
};

export default TodayParkingData;
